<template>
    <section class="release">
        <div v-if="user.sysDistrict.districtLevel==1 && releaseVis">
            <div v-loading="releaseLoad" element-loading-text="任务发布中，请稍后" element-loading-background="rgba(0, 0, 0, 0.3)">
                <div class="topCard">
                    <el-card class="titleCard">
                        <p class="release-title">任务发布</p>
                        <a class="release-title-detail">任务基本信息</a>
                    </el-card>
                </div>
                <el-card class="cardHeight">
                    <el-form :inline="true" :model="form" ref="form" class="release-form" label-width="100px" :rules="rules">
                        <el-row class="firstRow" >
                            <el-col :span="12">
                                <el-form-item label="任务名称" prop="name">
                                    <el-input v-model="form.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <el-form-item label="截止日期" prop="endTime">
                                    <el-date-picker v-model="form.endTime" type="date" placeholder="选择截止日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="任务类型" prop="type">
                                    <el-select v-model="form.type">
                                        <el-option v-for="item in typeList" :value="item.value" :label="item.label" :key="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div v-show="form.type === '日常工作考核'">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="任务年度" prop="taskYear">
                                        <el-date-picker
                                            v-model="form.taskYear"
                                            type="year"
                                            placeholder="请选择任务年度">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="任务季度" prop="taskQuarter">
                                        <el-select v-model="form.taskQuarter">
                                            <el-option value="第一季度" label="第一季度" key="第一季度"></el-option>
                                            <el-option value="第二季度" label="第二季度" key="第二季度"></el-option>
                                            <el-option value="第三季度" label="第三季度" key="第三季度"></el-option>
                                            <el-option value="第四季度" label="第四季度" key="第四季度"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <el-row>
                            <el-col>
                                <el-form-item label="工作内容" prop="content">
                                    <el-input v-model="form.content" type="textarea" style="width:340px" :rows="4"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-form-item label=" ">
                                <el-button type="primary" @click="submit('form')" size="medium">
                                    <icon name="release" scale="2" class="release-icon" ></icon>
                                    <span>发 布</span>
                                </el-button>
                                <el-button type="warning" @click="reWrite('form')" size="medium">
                                    <icon name="reWrite" scale="2" class="release-icon"></icon>
                                    <span>重 置</span>
                                </el-button>
                            </el-form-item>
                        </el-row>
                    </el-form>
                </el-card>
            </div>
        </div>
        <div v-else>
            <div class="taskList">
                <div class="task-list-item">
                    <el-card style="width: calc(100% - 45px);margin: 0 auto; height: 80px;text-align: left;z-index: 555;position: relative" class="titleCard">
                        <p style="color: white;font-size: 20px;margin-top:-5px;">任务列表</p>
                        <a style="color: hsla(0,0%,100%,.62);;margin-top:6px;position: absolute;font-size: 14px;">待执行的所有任务列表</a>
                    </el-card>
                    <el-card v-loading="tableLoad" v-if="user.sysDistrict.districtLevel<3"
                             style="margin-top: -40px;margin-bottom: 20px;padding-top: 30px;">
                        <div class="taskStyle" v-for="item in taskList"  @click="trackInfo(item)">
                            <div style="flex: 5">
                                <img src="/static/img/party-logo.png" style="width: 22px;height: 20px;margin: 0 3px -4px 0;" alt="党建logo"/>
                                <span style="color:#868686">任务：</span>
                                <span style="color: #2B2B2B" v-if="user.sysDistrict.districtLevel==1">{{item.name}}</span>
                                <span style="color: #2B2B2B" v-if="user.sysDistrict.districtLevel==2">{{item.taskName}}</span>
                            </div>
                            <div style="flex: 4;">
                                <span style="color:#868686">类型：</span>
                                <span style="color: #2B2B2B" v-if="user.sysDistrict.districtLevel==1">{{item.type}}</span>
                                <span style="color: #2B2B2B" v-if="user.sysDistrict.districtLevel==2">{{item.taskType}}</span>
                            </div>
                            <div style="flex: 4;text-align: center">
                                <span style="color:#868686">截止时间：</span>
                                <span style="color: #2B2B2B">{{item.endTime}}</span>
                            </div>
                            <div style="flex: 1;text-align: center">
                                <el-tag type="success" effect="dark" v-if="handleTimeTag(item.endTime)">进行中</el-tag>
                                <el-tag type="info" effect="dark" v-if="!handleTimeTag(item.endTime)">已截止</el-tag>
                            </div>
                            <div style="flex: 3;text-align: center">
                                <div style="width: 150px;margin: 25px auto 0 auto">
                                    <el-progress v-if="(item.currentPercent || 0) < 0.3" :percentage="Math.round((item.currentPercent || 0) * 1000)/10" color="#951200" ></el-progress>
                                    <el-progress v-else-if="(item.currentPercent || 0) < 0.7" :percentage="Math.round((item.currentPercent || 0) * 1000)/10" color="#e6a23c" ></el-progress>
                                    <el-progress v-else-if="(item.currentPercent || 0) < 1" :percentage="Math.round((item.currentPercent || 0) * 1000)/10" color="#0c89c2" ></el-progress>
                                    <el-progress v-else-if="(item.currentPercent || 0) == 1" :percentage="Math.round((item.currentPercent || 0) * 1000)/10" color="#67c23a" ></el-progress>
                                    <span v-else>ERROR</span>
                                </div>
                            </div>
                            <div v-show="user.sysDistrict.districtLevel === 2 " style="flex: 1;text-align: center">
                                <el-button v-if="user.sysDistrict.districtLevel===2&&handleTimeTag(item.endTime)" type="success" plain @click="jumpEdit(item.taskType)">执行</el-button>
                            </div>
                        </div>
                        <el-pagination style="text-align: right;margin-top: 20px; margin-bottom: 20px;clear: both" ref="pagination"
                                       background
                                       :total="pageable.total" :current-page.sync="pageable.currentPage"  :page-sizes="[8]"
                                       :page-size="pageable.pageSize"
                                       @current-change="currentChange" @size-change="sizeChange" layout="total, sizes, prev, pager, next">
                        </el-pagination>

                        <div v-show="user.sysDistrict.districtLevel==2">
                            <div v-if="taskForm.taskType === '基本信息更新'">
                                <div slot="header" class="clearfix">
                                    <br/>
                                    <br/>
                                    <span style="font-weight: bold;font-size: 20px" v-if="user.sysDistrict.districtLevel==1">{{taskForm.name}}</span>
                                    <span style="font-weight: bold;font-size: 20px" v-if="user.sysDistrict.districtLevel==2">{{taskForm.taskName}}</span>
                                    <span>
                            <el-tag type="success" effect="dark" v-if="handleTimeTag(taskForm.endTime)">进行中</el-tag>
                            <el-tag type="info" effect="dark" v-if="!handleTimeTag(taskForm.endTime)">已截止</el-tag>
                        </span>
                                </div>
                                <div style="text-align: right;font-size: 14px;margin:10px">
                                    <span style="background: rgb(220, 20, 60)">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                    <span>待编辑</span>
                                    <span style="background: #409EFF">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                    <span>待审核</span>
                                    <span style="background: rgb(57, 198, 103)">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                    <span>审核通过</span>
                                </div>
                                <div style="text-align: center;min-height: 300px;"  v-show="user.sysDistrict.districtLevel==2">
                                    <div class="townAuthDiv" v-for="(item, index) in trackList" :style="generateDiffStatusTown(item, index)">
                                        {{item.districtName ? item.districtName.replace(/支部/g, '') : ''}}
                                    </div>
                                </div>
                            </div>
                            <div v-else-if="taskForm.taskType === '考核指标内容制定'">
                            </div>

                        </div>


                    </el-card>
                </div>
                <div style="width: 400px;margin-right: 30px;height: 480px;display: inline-block;position: relative;z-index: 0;">
                    <div class="topCardRight">
                        <el-card style="height:100%;text-align: left" class="titleCard">
                            <p style="color: white;font-size: 20px;margin-top:-5px;">待执行任务</p>
                            <a style="color: hsla(0,0%,100%,.62);;margin-top:6px;position: absolute;font-size: 14px;">详细信息请看任务列表</a>
                        </el-card>
                    </div>
                    <div>
                      <el-card class="cardHeight" style="height: 724px;overflow: hidden;">
                        <div style="margin-top: 60px;text-align: left" :style="scroll">
                                <div style="background-color: #ecf5ff;height: 75px;border-radius: 5px;margin: 10px; padding: 10px;" v-for="item in releaseList">
                                    <p v-show="user.sysDistrict.districtLevel === 1" style="font-size: 18px;padding: 5px 0 5px 3px">{{item.name}}</p>
                                    <p v-show="user.sysDistrict.districtLevel === 2" style="font-size: 18px;padding: 5px 0 5px 3px">{{item.taskName}}</p>
                                    <el-col :span="11">
                                        <a style="display: inline-block;font-size: 14px;padding: 1px 0 1px 3px;">任务类型:
                                            <span v-show="user.sysDistrict.districtLevel === 1" style="color: rgba(37, 37, 37, 0.51);padding-left: 3px;font-size: 13px;">{{item.type||'暂无'}}</span>
                                            <span v-show="user.sysDistrict.districtLevel === 2" style="color: rgba(37, 37, 37, 0.51);padding-left: 3px;font-size: 13px;">{{item.taskType||'暂无'}}</span>
                                        </a>
                                    </el-col>
                                    <el-col :span="11">
                                        <a style="display: inline-block;font-size: 14px;padding: 1px 0 1px 0px">截止日期:
                                            <span style="color: rgba(37, 37, 37, 0.51);padding-left: 3px;font-size: 13px;">{{item.endTime||'暂无'}}</span>
                                        </a>
                                    </el-col>
                              </div>
                        </div>
                    </el-card>
                    </div>
                </div>

            </div>
            <div style="clear: both" v-if="user.sysDistrict.districtLevel==1">
                <el-card style="width: calc(100% - 45px);margin: 0 auto; height: 80px;text-align: left;z-index: 555;position: relative" class="titleCard">
                    <p style="color: white;font-size: 20px;margin-top:-5px;">任务详情</p>
                    <a style="color: hsla(0,0%,100%,.62);;margin-top:6px;position: absolute;font-size: 14px;">单个任务每个村完成情况详情</a>
                </el-card>
                <el-card v-loading="trackLoad" style="margin-top: -40px">
                    <div slot="header" class="clearfix">
                        <br/>
                        <br/>
                        <span style="font-weight: bold;font-size: 20px" v-if="user.sysDistrict.districtLevel==1">{{taskForm.name}}</span>
                        <span style="font-weight: bold;font-size: 20px" v-if="user.sysDistrict.districtLevel==2">{{taskForm.taskName}}</span>
                        <span>
                        <el-tag type="success" effect="dark" v-if="handleTimeTag(taskForm.endTime)">进行中</el-tag>
                        <el-tag type="info" effect="dark" v-if="!handleTimeTag(taskForm.endTime)">已截止</el-tag>
                    </span>
                    </div>
                    <div style="text-align: right;font-size: 14px;margin:10px">
                        <span style="background: rgb(220, 20, 60)">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>待编辑</span>
                        <span style="background: #409EFF">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>待审核</span>
                        <span style="background: rgb(57, 198, 103)">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>审核通过</span>
                    </div>
                    <div v-if="taskForm.type === '基本信息更新'">
                        <div class="taskDetail" v-if="user.sysDistrict.districtLevel==1">
                            <div style="width: 144px;overflow: hidden" v-for="item in trackList">
                                <div class="townDetailDiv" >
                                    <el-row style="line-height: 40px">{{item.objectName}}</el-row>
                                    <el-row style="font-size: 12px;">
                                        <el-col :span="24">
                                            <el-progress v-if="(item.currentPercent || 0) < 0.3" :percentage="Math.round((item.currentPercent || 0) * 1000)/10" color="#951200" ></el-progress>
                                            <el-progress v-else-if="(item.currentPercent || 0) < 0.7" :percentage="Math.round((item.currentPercent || 0) * 1000)/10" color="#e6a23c" ></el-progress>
                                            <el-progress v-else-if="(item.currentPercent || 0) < 1" :percentage="Math.round((item.currentPercent || 0) * 1000)/10" color="#0c89c2" ></el-progress>
                                            <el-progress v-else-if="(item.currentPercent || 0) == 1" :percentage="Math.round((item.currentPercent || 0) * 1000)/10" color="#67c23a" ></el-progress>
                                            <span v-else>ERROR</span>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="cunDetailDiv" v-for="(sub, index) in item.villageCadres" :style="generateDiffStatus(sub, index)">
                                    {{sub.districtName.replace(/支部/g, '')}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else-if="taskForm.type === '考核指标内容制定'">
                        <div class="taskDetail" v-if="user.sysDistrict.districtLevel==1">
                            <div class="townDetailDiv" :style="generateReviewContentStatus(item)" v-for="item in trackList">
                                {{item.objectName}}
                            </div>
                        </div>
                    </div>
                </el-card>

            </div>
            <div style="clear: both" v-if="user.sysDistrict.districtLevel==1">
                <el-card style="width: calc(100% - 45px);margin: 0 auto; height: 80px;text-align: left;margin-top: 30px;z-index: 555;position: relative" class="titleCard">
                    <p style="color: white;font-size: 20px;margin-top:-5px;">任务统计汇总</p>
                    <a style="color: hsla(0,0%,100%,.62);;margin-top:6px;position: absolute;font-size: 14px;">每个镇每个任务的完成状态</a>
                </el-card>
                <el-card class="total-task-progress" v-loading="totalLoad" style="min-height: 300px;margin-top: -40px">
                    <div slot="header" class="clearfix">
                        <br/>
                        <br/>
                        <span style="font-weight: bold;font-size: 20px">全市村书记基本信息更新任务完成情况一览表</span>
                    </div>
                    <div style="text-align: right;font-size: 14px;margin-top: 5px;margin-bottom: 10px">
                        <span style="background: rgb(220, 20, 60)">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>未执行</span>
                        <span style="background: #dcbe08">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>执行中</span>
                        <span style="background: rgb(57, 198, 103)">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>已完成</span>
                    </div>
                    <div class='wholeContent'>
                        <div class="contentDiv">
                            <div style="display: flex">
                                <div>
                                    <div class="tableline">
                                        <p style="line-height: 30px; text-align: right;padding-right: 10px;padding-top: 6px">任务</p>
                                        <p style="line-height: 30px; text-align: left;padding-left: 10px;">组织</p>
                                    </div>
                                    <table id="org-label-key" style="overflow-x: scroll;overflow-y: hidden;max-height: 620px;margin-top: 1px;" class="tableCol">
                                        <tr v-for="(value,key) in activityList" v-if="key!='title'">
                                            <span v-show="false">{{keys = key.split(",")}}</span>
                                            <td :class="`tableColContent level${keys[2]}`" :title="key">
                                                {{keys[1]}}
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="result-table">
                                    <div class="activity-label" id="activity-label-key">
                                        <!--                                    <div style="position: absolute;right: 5px;top:70px;">-->
                                        <!--                                        <el-button @click="scrollTo('left')" type="text" icon="el-icon-caret-left"></el-button>-->
                                        <!--                                        <el-button @click="scrollTo('right')" style="margin-left: -10px" type="text" icon="el-icon-caret-right"></el-button>-->
                                        <!--                                    </div>-->
                                        <table class="tableContent" >
                                            <tr>
                                                <td v-for="item in activityList.title">
                                                    <div style="padding-top: 10px;font-size: 16px;background-color: #43a047;height: 75px;color: white;width: 150px">{{item}}</div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <table id="result-table-content" class="tableContent" style="margin-top: -7px;overflow: scroll;max-height: 620px;" @scroll="handleScroll">
                                        <tr v-for="(value,key) in activityList"  v-if="key!='title'">
                                            <td class="sta-content" v-for="(index,item) in value"  >
                                                <div style="width: 150px; background-color: #39c667;line-height: 35px;height: 35px;" v-if="index.status=='3'" @click="showPictures(index)">已完成</div>
                                                <div style="width: 150px; background-color: #DC143C;line-height: 35px;height: 35px;"  v-else-if="index.currentPercent == null && (index.objectId !== null)" >未执行</div>
                                                <div style="width: 150px; background-color: #dcbe08;line-height: 35px;height: 35px;" v-else-if="index.currentPercent != null" >执行中{{Number(index.currentPercent) * 100}}%</div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>

            </div>
        </div>

    </section>

</template>

<script>
    import CommonFileUpload from '@/components/FileUpLoad';
    import CommonCRUD from '@/components/CommonCRUD';
    export default {
        name: "TaskRelease",
        props: {
            releaseVis: {
                type: Boolean,
                default: false
            }
        },
        data(){
            return{
                form:{},
                rules:{
                    name: [
                        { required: true, message: '请输入标题', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '请选择类型', trigger: 'change' }
                    ],
                    score: [
                        { required: true, message: '请输入得分', trigger: 'blur' }
                    ],
                    endTime: [
                        { required: true, message: '请选择截止时间', trigger: 'blur'}
                    ],
                },
                typeList:[
                    {
                        label:"基本信息更新",
                        value:"基本信息更新"
                    },
                    {
                        label:"考核指标内容制定",
                        value:"考核指标内容制定"
                    },
                    {
                        label:"考核实施",
                        value:"考核实施"
                    },
                    {
                        label:"职级评定",
                        value:"职级评定"
                    },
                    {
                        label:"日常工作考核",
                        value:"日常工作考核"
                    }
                ],
                taskList:[],
                releaseList:[],
                pageable: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 8
                },
                taskForm:{},
                trackList:[],
                trackLoad:false,
                user:{},
                releaseLoad:false,
                scroll:{
                    marginTop:'0px'
                },
                tableLoad:false,
                totalLoad:false,
                activityList: []
            }
        },
        watch: {
            'releaseList': {
                handler: function (newVal, oldVal) {
                    if(newVal.length>4){
                        let height = this.releaseList.length*75;
                        let time = (this.releaseList.length-4)*2000;
                        this.scroll.marginTop = `-${height}px`;
                        this.scroll.transition = `${this.releaseList.length*2}s`;
                        setInterval(()=>{
                            if(this.scroll.marginTop == `-${height}px`){
                                this.scroll.marginTop = `0px`;
                                this.scroll.transition = `0s`;
                                setTimeout(()=>{
                                    this.scroll.marginTop = `-${height}px`;
                                    this.scroll.transition = `${this.releaseList.length*2}s`
                                },500)

                            }else{
                                this.scroll.marginTop = `-${height}px`;
                                this.scroll.transition = `${this.releaseList.length*2}s`;
                            }
                        },time)
                    }
                }
            }

        },
        methods:{
            currentChange(value) {
                this.pageable.currentPage = value;
                this.showTaskList();
            },
            sizeChange(value) {
                this.pageable.pageSize = value;
            },
            showTaskList(){
                if(this.user.sysDistrict.districtLevel==1){
                    this.$http('POST',`identity/cadreTask/page?page=${this.pageable.currentPage - 1}&size=${this.pageable.pageSize}&sort=endTime,desc`,false).then(data=>{
                        this.pageable.total = data.totalElements;
                        this.taskList = data.content;
                        if (this.taskList && this.taskList.length > 0) {
                            this.trackInfo(this.taskList[0]);
                        }
                    });
                }else if(this.user.sysDistrict.districtLevel==2){
                    this.$http('POST', `/identity/cadreTaskObject/page?page=${this.pageable.currentPage - 1}&size=${this.pageable.pageSize}&sort=createdAt,desc`,
                        {objectId:this.user.districtId},false).then(data=>{
                        this.pageable.total = data.totalElements;
                        this.taskList = data.content;
                        if (this.taskList && this.taskList.length > 0) {
                            this.trackInfo(this.taskList[0]);
                        }
                    })
                }

            },
            showAllTask(){
                if(this.user.sysDistrict.districtLevel == 1) {
                    this.releaseList = [];
                    this.$http('POST', `identity/cadreTask/list?sort=endTime,desc`, false).then(data => {
                       this.releaseList = data;
                    }).catch(_=>{
                        this.$messgae(
                            {
                                type:'warning',
                                message:'活动数据拉取失败，请检查网络'
                            }
                        )
                    });
                } else if (this.user.sysDistrict.districtLevel == 2) {
                    this.releaseList = [];
                    this.$http('POST', `identity/cadreTaskObject/list`, {objectId: this.user.districtId, status: '0'}, false).then(data => {
                        this.releaseList = data;
                    }).catch(_=>{
                        this.$messgae(
                            {
                                type:'warning',
                                message:'活动数据拉取失败，请检查网络'
                            }
                        )
                    });
                }
            },
            trackInfo(item){
                this.trackLoad = true;
                this.taskForm = item;
                if(this.user.sysDistrict.districtLevel==1){
                    this.$http('GET',`identity/cadreTask/${item.id}taskId`,false).then(data=>{
                        this.trackList = data;
                        this.trackLoad = false;
                    });
                }else if(this.user.sysDistrict.districtLevel==2){
                    this.$http('POST',`identity/villageCadres/list`,{districtId:this.user.districtId,hasRetire: '0', cadresType:'SECRETARY'},false).then(data=>{
                        this.trackList = data;
                        this.trackLoad = false;
                    });
                }

            },
            handleTimeTag(time){
                return(new Date(time+" 23:59:59").getTime()>=new Date().getTime());
            },
            submit(form){
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.releaseLoad = true;
                        this.$http('POST', `/identity/cadreTask/`, this.form).then(() => {
                            this.showAllTask();
                            this.showTaskList();
                            this.form = {};
                            this.$refs[form].resetFields();
                            this.releaseLoad = false;
                        });
                    }else{

                    }
                });

            },
            reWrite(form){
                this.form = {};
                this.$refs[form].resetFields();
            },
            loadTotalTaskProcess() {
                this.totalLoad = true;
                this.$http('POST', `/identity/cadreTask/list/completion?year=2020&objectType=Party`, null, false).then(
                    data => {
                        this.activityList = data;
                        this.totalLoad = false;
                    }
                )
            },
            handleScroll(e) {
                document.getElementById('activity-label-key').scrollLeft = e.target.scrollLeft;
                document.getElementById('org-label-key').scrollTop = e.target.scrollTop;
            },
            scrollTo(type) {
                if (type === 'left') {
                    document.getElementById('result-table-content').scrollLeft -= 400;
                    document.getElementById('activity-label-key').scrollLeft -= 400;

                } else {
                    document.getElementById('result-table-content').scrollLeft += 400;
                    document.getElementById('activity-label-key').scrollLeft += 400;
                }
            },
            generateDiffStatus(sub, index) {
                let style = {
                    height: '50px',
                    color: '#fff',
                    width: '69px',
                    display: 'inline-block',
                    padding: '6px 0'
                }
                if (sub.state === '0') {
                    style.background = 'rgb(220, 20, 60)';
                } else if (sub.state === '2' || sub.state === '1') {
                    style.background = '#409EFF';
                } else if (sub.state === '3') {
                    style.background = 'rgb(57, 198, 103)';
                } else {
                    style.background = 'rgba(0, 0, 0, 0.1)';
                }
                return style;
            },
            generateDiffStatusTown(sub, index) {
                let style = {
                    height: '50px',
                    color: '#fff',
                    width: '150px',
                    display: 'inline-block',
                    padding: '6px 0'
                }
                if (sub.state === '0') {
                    style.background = 'rgb(220, 20, 60)';
                } else if (sub.state === '2' || sub.state === '1') {
                    style.background = '#409EFF';
                } else if (sub.state === '3') {
                    style.background = 'rgb(57, 198, 103)';
                } else {
                    style.background = 'rgba(0, 0, 0, 0.1)';
                }
                return style;
            },
            generateReviewContentStatus(item) {
                let style = {
                    'line-height': '60px'
                };
                if (item.status === '0') {
                    style.background = 'rgb(220, 20, 60)';
                } else if (item.status === '1') {
                    style.background = '#409EFF';
                } else if (item.status === '2') {
                    style.background = 'rgb(57, 198, 103)';
                } else {
                    style.background = 'rgba(0, 0, 0, 0.1)';
                }
                return style;
            },
            jumpEdit(taskType){
                this.$emit('jumpEdit', taskType)
            }
        },
        mounted(){

        },
        components:{
            CommonFileUpload,
            CommonCRUD
        },
        created() {
            this.user = JSON.parse(sessionStorage.getItem("userInfo"));
            this.showAllTask();
            this.showTaskList();
            this.loadTotalTaskProcess();
        }
    }
</script>
<style>
    .release .el-card__body{
        padding: 10px!important;
    }
    .release .taskStyle .el-tag{
        font-size: 14px;
    }
    .release .taskStyle .el-tag--mini{
        height: 22px;
        line-height: 22px;
    }
    .release .el-step.is-center .el-step__description{
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .release td {
        padding: 0!important;
    }
    .release .taskDetail .el-progress__text{
        color: #fff;
    }
</style>

<style scoped>
    .release{
        padding: 10px 30px;
    }
    .release .taskList{
        width: 100%;
    }
    .release .taskStyle{
        display: flex;
        width: 95%;
        margin: 10px auto;
        height: 70px;
        text-align:left;
        line-height: 70px;
        font-size: 16px;
        font-family:Source Han Sans CN;
        border-bottom:rgba(141,141,140,0.2) 1px solid;
        transition: all .3s;
    }
    .release .taskStyle span{
        width: 100%;
        max-height: 30px;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
    }
    .release .trackStyle{
        float: left;
        width: 32%;
        margin: 7px;
        text-align: left;
        line-height: 35px;
        height: 520px;
    }
    .release .taskStyle:hover{
        cursor: pointer;
        transform: scale(1.05);
        border: 1px transparent;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        background:linear-gradient(-90deg,rgba(240,252,255,1),rgba(216,234,254,1)) ;
    }
    .release .topCard {
        width: 95%;
        margin: 0 auto;
        height: 80px;
        position: relative;
        z-index: 10;
    }
    .release .cardHeight {
        margin-top: -40px;
    }
    .release .topCardRight {
        width: 90%;
        height: 80px;
        position: relative;
        margin: 0 auto;
        z-index: 10;
    }
    .release .titleCard {
        height:100%;
        text-align: left;
        background: linear-gradient(60deg, #66aabb, #43a047);
        box-shadow: 0 12px 20px -10px rgba(76, 175, 80, .28), 0 4px 20px 0 rgba(0, 0, 0, .12), 0 7px 8px -5px rgba(76, 175, 80, .2);
    }
    .release .firstRow {
        margin-top: 80px ;
    }
    .release .taskDetail{
        display: flex;
        text-align: center;
        min-height: 300px;
        border-radius: 10px;
    }
    .release .townDetailDiv{
        width: 138px;
        font-size: 14px;
        background-color: #43a047;
        height: 70px;
        color: #fff;
        border: 1px solid #fff;
        transition: all .3s;
    }
    .release .townDetailDiv:hover{
        transform: scale(1.1);
        border: 1px transparent;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
    .release .cunDetailDiv{
        height: 70px;
        font-size: 14px;
        border: 1px solid #fff;
        transition: all .3s;
        vertical-align: top;
    }
    .release .cunDetailDiv:hover{
        transform: scale(1.1);
        border: 2px transparent;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
    .release .townAuthDiv{
        font-size: 14px;
        width: 100%;
        height: 70px;
        padding-top:15px;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        transition: all .3s;
        vertical-align: top;
        line-height: 35px;
    }

    .release .townAuthDiv:hover{
        transform: scale(1.1);
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border: 1px transparent;
    }

    .tableCol{
        width:160px;
        display: inline-block;
        vertical-align: top;
        margin-top: -3px;
        margin-left: -2px;
    }
    .tableCol td{
        height: 100px;
        font-size: 16px;
    }
    .tableColContent{
        background-color: #f3f3f3;
        width: 150px;
        font-family:' 黑体';
        font-weight:bold;
        line-height:35px;
        font-size: 14px!important;
        height: 35px!important;
        text-align: center;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:1;
        -webkit-box-orient:vertical;
        padding-left: 5px;
        padding-right: 5px;
    }

    .tableCol::-webkit-scrollbar {
        width: 0;
    }
    .tableContent{
        width: 100%;
        display: inline-block;
        text-align: center;
        margin-top: -3px;
    }

    .tableContent button{
        height: 100px;
        width: 100px;
        padding:3px 3px;
        border-radius:4px;
        background-color: #F4F4F4;
        font-size: 14px;
    }
    .tableContent > tr > td > div{
        height: 25px;
        width: 100px;
    }
    .tableContent .sta-content *{
        width: 150px;
        font-size: 14px;
        color: white;
        height: 35px;
        line-height: 35px;
        letter-spacing: 2px;
        transition: all .3s;
    }
    .tableContent .sta-content :hover{
        cursor: pointer;
        transform: scale(1.1);
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border: 1px transparent;
    }
    .tableline{
        position:relative;
        width:150px;
        height:75px;
        box-sizing:border-box;
        border:1px solid rgba(227,213,213,0.55);
        background: rgb(67, 160, 71);
        color: white;
    }

    .result-table {
        width: calc(100% - 100px);
        overflow-x: scroll;
        position: relative;
    }

    .tableline::before{
        content:"";
        position:absolute;
        left: 17px;
        top: 4px;
        width:112px;
        height:33px;
        box-sizing:border-box;
        border-bottom:1px solid rgba(227,213,213,0.55);
        transform-origin:bottom center;
        transform:rotateZ(26deg) scale(1.5);
    }
    .wholeContent{
        width: 100%;
    }
    .task-list-item {
        display: inline-block;
        width: calc(100% - 440px);
        vertical-align: top;
    }
    .release-form {
        text-align: left;
        margin-left: 10%;
        max-width: 800px;
    }
    .release-title {
        color: white;
        font-size: 20px;
        margin-top:-5px;
    }
    .release-title-detail {
        color: hsla(0,0%,100%,.62);
        margin-top: 6px;
        position: absolute;
        font-size: 14px;
    }
    .release-icon {
        margin-left: 0px;
        position:relative;
        vertical-align: middle;
    }
</style>
